<template>
  <div class="shop">
    <!-- 头部导航 -->
    <el-row :gutter="10" class="top">
      <el-col :span="2"><div class="grid-content bg-purple" @click="home">网站首页</div></el-col>
      <el-col :span="15"><div class="grid-content bg-purple-light" @click="home">鲜花网站</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple" @click="goto">退出登录</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light" @click="admin">admin</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light" @click="shopcart">购物车</div></el-col>
    </el-row>

    <!-- 分类选择 -->
    <div class="choice">
      <!-- 品牌 -->
      <div class="title">
        <span>品牌：</span>
        <span class="span" 
            @click="change1(index),filterflowers(item.id)"
            :class="{change:index == indexOf1}"
            v-for="(item,index) in type" :key="index">{{item.name}}
        </span>
      </div>
      <!-- 排序 -->
      <div class="title">
        <span>排序：</span>
        <span class="span" 
          @click="change2(index)" 
          :class="{change:index == indexOf2}" 
          :key="item.index" v-for="(item,index) in sort">{{item}}</span>
      </div>
    </div>

    <el-divider></el-divider>

    <div>
      <el-row :gutter="24" class="row">
        <div v-for="item in flowers" :key="item.index">
          <el-col :span="6" class="col">
            <div class="grid-content bg-purple col-bc">
              <!-- 花朵图片 -->
              <img :src="item.url">
              <!-- 花朵价格介绍 -->
              <div class="price">
                <div>{{item.name}}</div>
                <p>销量{{item.number}}</p>
                <span>￥{{item.price}}</span>
                <div>
                  <el-button @click="add(item)" size="mini" type="danger" plain>添加购物车</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "shop",
  data(){
    return{
      /* 判断显示第几个品牌 */
      indexOf1:0,
      /* 判断显示第几个排序 */
      indexOf2:0,
      
      /* 品牌分类 */
      type:[
        {id:0,name:'全部'},{id:1,name:'玫瑰'},{id:2,name:'满天星'},{id:3,name:'百合'},{id:4,name:'向日葵'},{id:5,name:'花'},
      ],
      /* 排序分类 */
      sort:[
        '全部','销量','价格'
        
      ],
      /* 花朵列表 */
      flowers:[],
      
      /* 花朵列表数据库 */
      flower:[
        {id:1,url:require('../img/3.jpg'), name:'玫瑰花', number:20, price:200,belong:1},
        {id:2,url:require('../img/10.jpg'), name:'粉玫瑰1', number:16, price:160,belong:1},
        {id:3,url:require('../img/11.jpg'), name:'粉玫瑰2', number:20, price:200,belong:1},
        {id:4,url:require('../img/12.jpg'), name:'粉玫瑰3', number:14, price:140,belong:1},
        {id:5,url:require('../img/5.jpg'), name:'满天星1', number:30, price:300,belong:2},
        {id:6,url:require('../img/6.jpg'), name:'满天星2', number:32, price:320,belong:2},
        {id:7,url:require('../img/7.jpg'), name:'满天星3', number:20, price:200,belong:2},
        {id:8,url:require('../img/2.jpg'), name:'紫花', number:6, price:60,belong:5},
        {id:9,url:require('../img/4.jpg'), name:'粉花', number:8, price:60,belong:5},
        {id:10,url:require('../img/8.jpg'), name:'向日葵1', number:5, price:50,belong:4},
        {id:11,url:require('../img/9.jpg'), name:'向日葵2', number:8, price:80,belong:4},
        {id:12,url:require('../img/13.jpg'), name:'百合花1', number:6, price:60,belong:3},
        {id:13,url:require('../img/14.jpg'), name:'百合花2', number:8, price:80,belong:3},
      ]
    }
  },
  methods:{
    /* 更改所选的品牌 */
    change1(index){
      this.indexOf1 = index
    },
    /* 更改所选的排序 */
    change2(index){
      this.indexOf2 = index
    },
    /* 向shop组件跳转 */
    home(){
      this.$router.push('/shop')
    },
    /* 向admin组件跳转 */
    admin(){
      this.$router.push('/admin')
    },
    /* 退出登录功能 */
    goto(){
      this.$confirm('是否退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        /* 确定退出事件回调 */
        this.$message({
          type: 'success',
          message: '退出成功!',
        });
        this.$router.push('/')
      }).catch(() => {
        /* 取消退出事件回调 */
        this.$message({
          type: 'info',
          message: '取消退出'
        });
      });
    },
    /* 向shopcart组件跳转 */
    shopcart(){
      this.$router.push('/shopcart')
    },
    /* 过滤筛选所选的花朵 */
    filterflowers(id){
      /* 如果是首次加载 */
      if (id == 0){
        this.flowers.slice(0)
        this.flowers.push(...this.flower)
      }else {
          /* 通过换品牌来筛选花朵 */
          let res = this.flower.filter(item =>{
          return item.belong == id
        })
        this.flowers.splice(0)
        this.flowers.push(...res)
      }
    },
    /* 添加花朵 */
    add(item) {
      this.$message({
        message: '添加购物车成功',
        type: 'success'
      });
      this.$store.commit('add', item)
    }
  },
  /* 挂载生命周期 */
  mounted() {
    this.filterflowers(0)
  }
}
</script>

<style scoped>
  .shop{
    background: #f6f6f6;
  }
  .top{
    height: 40px;
    background: #7c7272;
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .choice{
    padding: 40px 0 20px 30px;
  }
  .title{
    margin-top: 10px;
  }
  .span{
    border: 1px solid #ffffff;
    margin-right: 20px;
    padding: 2px 10px;
    border-radius: 5px;
  }
  .change{
    background: rgb(143, 106, 106);
  }
  .col{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .col img {
    border-radius: 10px;
    width: 250px;
    height: 250px;
    margin-top: 10px;
  }
  .col-bc{
    background: #ffffff;
    border: 1px solid #e5e4e4;
    border-radius: 10px;
  }
  .col-bc:hover{
    border: 1px solid #3cd2f5;
    box-shadow: 0 0 20px #aaa;
  }
  .price{
    text-align: center;
    margin-bottom: 20px;
  }
  .price span{
    color: red;
  }
</style>
